<template>
    <div class="login">
        <van-nav-bar title="登陆页面" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="login-img">
            <img src="../../static/images/logo.webp" alt="" srcset="">
        </div>
        <div class="login-box">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="useracc" name="账号" label="账号" placeholder="请填写账号"
                        :rules="[{ required: true, message: '请填写账号' }]" />

                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请填写密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px; display: flex;">
                    <van-button round block type="primary" native-type="submit" style="margin-left: 1.5333rem">
                        登录
                    </van-button>
                    <van-button round block type="primary" @click="goReg" style="margin-left: 2.5rem">
                        去注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>


<style lang="scss" scoped>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.login-img {
    width: 60%;
    height: 10.3333rem;
    margin: .5333rem auto 0;
    // overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        // box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);

    }
}

.van-button {
    width: 8rem;
    margin-left: 1.3rem;
}

.reg {
    position: absolute;
    top: 59%;
    left: 55.5%;
    width: 7.8rem;
    height: 2.82rem;
    background-color: $backGroundColor;
    color: #fff;
    text-align: center;
    line-height: 2.6667rem;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid skyblue;
}

.van-button--block {
    background-color: $backGroundColor;
    color: #fff;
}

.van-field__control {
    height: 2rem;
}

.my-item {
    padding: 0 1rem;
}
</style>



<script lang="ts" setup>
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { login } from '../../request';
import { defineComponent, reactive, ref, } from "vue";
const onClickLeft = () => history.back();
const useracc = ref('');
const password = ref('');
let router = useRouter();
// showToast('提示内容');
const onSubmit = (values: any) => {
    console.log('submit', values);
    // 记录表单信息
    let user_acc = useracc.value;
    let user_pwd = password.value;
    // 判断输入框是否有值
    if (user_acc.length == 0 || user_pwd.length == 0) {
        console.log("输入框不能为空");
        // showToast("输入框不能为空。");
        return;
    }
    // 登录
    login({ user_acc, user_pwd }).then((content: any) => {
        // console.log(content);
        let { token, code, msg } = content;
        if (code == 200) {
            // 缓存token用户临时身份
            localStorage.setItem('auto_token', token);
            sessionStorage.setItem('auto_token1', token);
            // 跳转个人中心
            let d = setTimeout(() => {
                router.push({
                    path: '/my'
                })
                clearTimeout(d);
            }, 1000)
        }
        // 提示
        showToast(msg);
    })
        .catch(error => {
            console.log(error)
            // showToast('账户不存在');
        })
};
const goReg = () => {
    router.push({
        path: '/register'
    })
}
</script>